<template>
  <div class="showMain">
    <div class="container">
      <div class="item"><a class="circle" :href="hrefLeft" :style="{backgroundImage: 'url('+ showLeft +')'}" target="view_window"><p>{{wordLeft}}</p></a></div>
      <div class="item"><a class="circle" :href="hrefRight" :style="{backgroundImage: 'url('+ showRight +')'}" target="view_window"><p>{{wordRight}}</p></a></div>
    </div>
    <div class="page" ref="page">
      <div :class="{ 'item': true, 'active': pageActive1}" @click.prevent="handleClick(1)">1</div>
      <div :class="{ 'item': true, 'active': pageActive2}" @click.prevent="handleClick(2)">2</div>
      <div :class="{ 'item': true, 'active': pageActive3}" @click.prevent="handleClick(3)">3</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'fourth',
  data () {
    return {
      desc: ['掌中游微信服务号', '掌中游后台管理系统', 'React模仿简书首页', 'Vue模仿去哪儿首页', 'Vue建立个人简历', 'Node.js创建个人微信服务号'],
      pageActive1: true,
      pageActive2: false,
      pageActive3: false,
      hrefLeft: 'https://20181106.oss-cn-beijing.aliyuncs.com/intro/zzuWechat.jpg',
      hrefRight: 'https://20181106.oss-cn-beijing.aliyuncs.com/intro/zzuEle.PNG',
      showLeft: 'https://20181106.oss-cn-beijing.aliyuncs.com/intro/zzuWechat.jpg',
      showRight: 'https://20181106.oss-cn-beijing.aliyuncs.com/intro/zzuEle.PNG',
      wordLeft: '掌中游微信服务号',
      wordRight: '掌中游后台管理系统',
      bg: ['https://20181106.oss-cn-beijing.aliyuncs.com/intro/zzuWechat.jpg',
           'https://20181106.oss-cn-beijing.aliyuncs.com/intro/zzuEle.PNG',
           'https://20181106.oss-cn-beijing.aliyuncs.com/intro/jianshu.PNG',
           'https://20181106.oss-cn-beijing.aliyuncs.com/intro/travel.PNG',
           'https://20181106.oss-cn-beijing.aliyuncs.com/intro/resume.PNG',
           'https://20181106.oss-cn-beijing.aliyuncs.com/intro/nodeWechat.jpg']
    }
  },
  methods: {
    handleClick (page) {
      if (page === 1) {
        this.pageActive1 = true
        this.pageActive2 = false
        this.pageActive3 = false
        this.wordLeft = this.desc[0]
        this.wordRight = this.desc[1]
        this.showLeft = this.hrefLeft = this.bg[0]
        this.showRight = this.hrefRight = this.bg[1]
      } else if (page === 2) {
        this.pageActive1 = false
        this.pageActive2 = true
        this.pageActive3 = false
        this.wordLeft = this.desc[2]
        this.wordRight = this.desc[3]
        this.showLeft = this.hrefLeft = this.bg[2]
        this.showRight = this.hrefRight = this.bg[3]
      } else {
        this.pageActive1 = false
        this.pageActive2 = false
        this.pageActive3 = true
        this.wordLeft = this.desc[4]
        this.wordRight = this.desc[5]
        this.showLeft = this.hrefLeft = this.bg[4]
        this.showRight = this.hrefRight = this.bg[5]
      }
    }
  }
}
</script>

<style scoped lang="stylus">
  .showMain
    position: absolute;
    background: url("https://20181106.oss-cn-beijing.aliyuncs.com/first.jpg") no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .container
      width 60%
      height 60%
      margin 10% auto 0 auto
      display flex
      .item
        width 50%
        cursor pointer
        color black
        .circle
          background-color rgba(0,0,0,.3)
          display block
          border 1px solid #fff
          background-size cover
          margin 0 auto
          filter: grayscale(100%);
          border-radius 50%
          width 19rem
          height 19rem
          &:hover
            transform scale(1.1,1.1)
            filter: grayscale(0%);
            transition 0.4s ease
            color: skyblue
          p
            text-align center
            font-size 2.5rem
            font-family cursive
            padding 0 2rem 0 2rem
            margin-top 7rem

    .page
      width 16%
      margin-left 42%
      height 2rem
      display flex
      .item
        width 20%
        margin-left 2rem
        text-align center
        color #fff
        font-size 1.5rem
        background rgba(0,0,0,.3)
        cursor pointer
      .active
        background palegreen
</style>
